<template>
    <div class="pandect-content" id="whole">
        <div class="contentEdge content-left">
            <div class="chart-block top">
                <h3 class="chart-title">企业预警概况(没接口)</h3>
                <div class="enterprise">
                    <p>
                        <span>
                            <strong>1342</strong>
                            家
                        </span>
                        <span>
                            预警企业数量
                        </span>
                    </p>
                    <p>
                        <span>
                            12% 
                            <i class="el-icon-back eltop"></i>
                        </span>
                        <span>
                            环比上月
                        </span>
                    </p>
                </div>
            </div>
            <div class="chart-block center">
                <h3 class="chart-title">预警维度占比(没接口)</h3>
                <div class="chart" id="warningDimensions" v-if=1></div>
                <!-- listState.code===Code.Success -->
                <jPageMsg class="err-block" mode='f' v-else></jPageMsg>
            </div>
            <div class="chart-block bottom">
                <h3 class="chart-title">风险企业烽火值趋势(没接口   死数据)</h3>
                <div class="chart" id="enterpriseValue" v-if=1></div>
                <jPageMsg class="err-block" mode='f' v-else></jPageMsg>
            </div>
        </div>
        <div class="content-center">
            <div class="chart-block cEcharts">
                <h3 class="chart-title">企业风险地图(没接口)</h3>
                <div class="chart" id="riskMap" v-if=1>
                </div>
                <jPageMsg class="err-block" mode='f' v-else></jPageMsg>
            </div>
            <div class="chart-block bottom">
                <div class="flex">
                    <h3 class="chart-title">重点监控企业预警(没接口)</h3>
                    <a href="#">更多</a>
                </div>
                    <swiper :options="swiperOption" class="swiper">
                        <swiper-slide class="swiper-slide">
                            <ul>
                                <li>1</li>
                                <li>1</li>
                                <li>1</li>
                                <li>1</li>
                                <li>1</li>
                            </ul>
                        </swiper-slide>
                        <swiper-slide class="swiper-slide">
                            <ul>
                                <li>2</li>
                                <li>2</li>
                                <li>2</li>
                                <li>2</li>
                                <li>2</li>
                            </ul>
                        </swiper-slide>
                        <swiper-slide class="swiper-slide">
                            <ul>
                                <li>3</li>
                                <li>3</li>
                                <li>3</li>
                                <li>3</li>
                                <li>3</li>
                            </ul>
                        </swiper-slide>
                    </swiper>
            </div>
        </div>
        <div class="contentEdge content-right">
            <div class="chart-block top">
                <h3 class="chart-title">风险行业TOP5(没接口)</h3>
                <div class="chart" id="RiskIndustry" v-if=1></div>
                <jPageMsg class="err-block" mode='f' v-else></jPageMsg>
            </div>
            <div class="chart-block center">
                <div class="flex">
                    <h3 class="chart-title">预警企业分析(没接口)</h3>
                    维度
                <jSelect v-model="sortLabel" :initItems="sortLabels" :selectedIndex="sortIndex"></jSelect>
                </div>
                <ul>
                    <li v-for="user in newUsers" :key="user">
                        {{user}}
                    </li>
                </ul>
                <div class="chart" id="warningAnalysis " v-if=1></div>
                <jPageMsg class="err-block" mode='f' v-else></jPageMsg>
            </div>
            <div class="chart-block bottom">
                <h3 class="chart-title">舆情风险关键词（包括icp和舆情）(没接口)</h3>
                <div class="chart" id="opinionKeywords" v-if=1></div>
                <jPageMsg class="err-block" mode='f' v-else></jPageMsg>
            </div>
        </div>
    </div>
</template>

<script>
import { PieCharts } from '../../assets/js/chart/pieChart'
import { LineBarChart } from '../../assets/js/chart/lineBarChart'
import { ChinaChart } from '../../assets/js/chart/chinaChart'
import { GraphChart } from '../../assets/js/chart/graphChart'
import { Code } from '../../assets/js/operaCode'
import { jSelect, jLoading } from '../../components'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import {features as chinaData} from '../../assets/js/china'
// import china from '../../assets/js/china.js'
// import html2canvas from 'html2canvas'
// import { statAnaly as api } from '../../api'
export default {
  name: 'panContent',
  components: { jSelect, swiper, swiperSlide, jLoading },
  data() {
    return {
      sortLabels: ['企业类型', '企业规模', '注册资金', '成立年限'],
      sortIndex: 0,
      sortLabel: '',
      listState: {
        code: Code.Loading,
        msg: ''
      },
      users: [
        '企业类型',
        '企业类型1',
        '企业类型2',
        '企业类型3',
        '企业规模',
        '企业资金',
        '企业年限',
        '企业年限3'
      ],
      Code: Code,
      // 轮播
      swiperOption: {
        autoplay: {
          delay:1000,
          disableOnInteraction: false
        },
        speed: 2000,
        initialSlide: 0,
        loop: true,
        direction: 'vertical',
        slidesPerView: 'auto',
        autoplayDisableOnInteraction: true
      }
    }
  },
  computed: {
    newUsers() {
      var that = this
      return that.users.filter(function(user) {
        if (user.indexOf(that.sortLabel) !== -1) {
          return user
        }
      })
    }
  },
  mounted() {
    // 饼图
    this.getWarningDimensions()
    // 折线图
    this.getEnterpriseValue()
    // 柱形图
    this.getRiskIndustry()
    // 关键词
    this.getKeyWord()
    this.chinaMap()
  },
  methods: {
    chinaMap() {
    //   console.log(chinaData)
      let rawData = [
        {
          name: '北京',
          value: 599
        },
        {
          name: '上海',
          value: 142
        },
        {
          name: '黑龙江',
          value: 44
        },
        {
          name: '深圳',
          value: 92
        },
        {
          name: '湖北',
          value: 810
        },
        {
          name: '四川',
          value: 453
        }
      ]
      let data = {
        data: rawData,
        chinaData: chinaData
      }
      ChinaChart.drawChinaMap('riskMap', data)
    },
    setNoData(index) {
      this.chartStates[index].code = Code.NoData
      this.chartStates[index].msg = 'b'
    },
    chartStates() {
      let arr = []
      for (let i = 0; i < 9; i++) {
        let item = { code: Code.Loading, msg: '' }
        arr.push(item)
      }
      return arr
    },
    // 预警维度占比
    getWarningDimensions() {
      // this.chartStates[2].code = Code.Loading
      // api
      //     .getRiskType(this.globalParams)
      //     .then(rst => {
      //         let rawData = rst.data ? rst.data : []
      //         if (rawData.length > 0) {
      //             this.chartStates[2].code = Code.Success
      //             PieCharts.drawPieTwo('riskType', {seriesData: rawData})
      //         } else {
      //             this.setNoData(2)
      //         }
      //     })
      //     .catch(err => {
      //          this.chartStates[2] = err
      //     })
      let rawData = [
        {value: 335, name: '直接访问'},
        {value: 310, name: '邮件营销'},
        {value: 234, name: '联盟广告'},
        {value: 135, name: '视频广告'},
        {value: 1548, name: '搜索引擎'}
      ]
      PieCharts.drawPieTwo('warningDimensions', {seriesData: rawData})
    },
    // 风险企业烽火值趋势
    getEnterpriseValue() {
      let rawData = {
        xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        yAxisData: [200, 400, 600, 800, 1000, 1200, 1400],
        seriesData: [
          { data: [820, 932, 901, 934, 1290, 1330, 1320] }
        ]
      }
      LineBarChart.drawLine('enterpriseValue', rawData)
    },
    getRiskIndustry() {
      let rawData = {
        xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        yAxisData: [200, 400, 600, 800, 1000, 1200, 1400],
        seriesData: [
          { data: [820, 932, 901, 934, 1290, 1330, 1320] }
        ]
      }
      LineBarChart.drawBar('RiskIndustry', rawData)
    },
    getKeyWord() {
      let rawData = [
        {
          label: {fontSize: 28},
          name: '投资',
          symbolSize: [86, 46],
          value: '2246'
        },
        {
          label: {fontSize: 18},
          name: '调查',
          symbolSize: [66, 36],
          value: '928'
        },
        {
          label: {fontSize: 36},
          name: '规定',
          symbolSize: [32, 59],
          value: '6666'
        }
      ]
      GraphChart.drawWord('opinionKeywords', { data: rawData })
    }
  }
}
</script>

<style lang="scss" scoped>
.pandect-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .flex{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .chart {
        padding: 10px;
    }
    .chart-block {
        background: #fff;
        margin: 10px 5px;
        padding: 10px;
    }
    .content-center {
        flex: 1;
    }
    .contentEdge {
        width: 394px;
        height: 100%;
    }
    .top {
        height: 180px;
        .chart {
            height: 155px;
        }
    }
    .bottom {
        height: 250px;
        .chart {
            height: 220px;
        }
    }
    .center {
        height: 220px;
        .chart {
            height: 200px;
        }
    }
    .cEcharts {
        height: 430px;
    }
    .enterprise {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 25px;
        p {
            margin: 10px;
            padding: 10px;
            width: 50%;
            height: 100%;
            span {
                display: block;
            }
        }
        .eltop {
            transform: rotate(90deg);
            -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
        }
    }
    .swiper {
        width: 100%;
        height: 100%;
        overflow: hidden;
        ul {
            height: 100%;
            li {
                height: 20%;
            }
        }
    }
}
</style>


// WEBPACK FOOTER //
// src/view/pandect/panContent.vue